<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线视频播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            background: #111;
            color: #fff;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            width: 100%;
            height: 100%;
            max-width: 1600px;
        }

        .video-section {
            flex: 2;
            background: #000;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            padding: 5px;
        }

        .video-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #videoPlayer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .playlist-section {
            flex: 1;
            max-width: 360px;
            background: #1a1a1a;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .playlist-title {
            font-size: 1.4em;
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
        }

        .playlist-items {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 10px;
            margin-right: -10px;
        }

        .playlist-item {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-bottom: 8px;
            background: #252525;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
        }

        .playlist-item:hover {
            background: #333;
        }

        .playlist-item.active {
            background: #00a8ff;
            box-shadow: 0 4px 12px rgba(0, 168, 255, 0.3);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 视频播放区 -->
        <div class="video-section">
            <div class="video-container">
                <video id="videoPlayer" controls></video>
            </div>
        </div>
        <!-- 播放列表 -->
        <div class="playlist-section">
            <h2 class="playlist-title">播放列表</h2>
            <div class="playlist-items" id="playlist"></div>
        </div>
    </div>

    <script>
        // 支持 mp4、ogg、mkv
        const videos = [
            { title: "自然风光", src: "video/test.mp4" },
            
        ];

        const videoPlayer = document.getElementById('videoPlayer');
        const playlist = document.getElementById('playlist');

        // 初始化播放列表
        videos.forEach((video, index) => {
            const item = document.createElement('div');
            item.className = 'playlist-item';
            item.textContent = video.title; // 仅显示标题
            item.onclick = () => {
                playVideo(index);
            };
            if (index === 0) item.classList.add('active'); // 默认激活第一个视频
            playlist.appendChild(item);
        });

        // 自动播放第一个视频
        let currentVideoIndex = 0;
        playVideo(currentVideoIndex);

        // 播放指定索引的视频
        function playVideo(index) {
            document.querySelectorAll('.playlist-item').forEach(i => i.classList.remove('active'));
            const selectedItem = playlist.children[index];
            selectedItem.classList.add('active');

            // 动态设置多种格式的 `<source>`
            videoPlayer.innerHTML = `
                <source src="${videos[index].src}" type="video/mp4">
                <source src="${videos[index].src.replace('.mp4', '.ogg')}" type="video/ogg">
                <source src="${videos[index].src.replace('.mp4', '.mkv')}" type="video/x-matroska">
                您的浏览器不支持 HTML5 视频。
            `;
            videoPlayer.load();
            videoPlayer.play();
            currentVideoIndex = index;
        }

        // 自动连续播放下一个视频
        videoPlayer.addEventListener('ended', () => {
            const nextIndex = (currentVideoIndex + 1) % videos.length; // 循环播放
            playVideo(nextIndex);
        });
    </script>
</body>

</html>